<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.content {
				height: 500px;
				width: 500px;
				margin: auto auto;
				background-color: #DFE4EA;
			}
			.head{
				text-align: center;
			}
			
			li {
				height: 100px;
				width: 350px;
				display: inline;
			}
		
			li input {
				height: 50px;
				width: 50px;
				margin: 10px 10px;
				border-radius:50%;
			}
			.red {
				background-color: red;
			}
			.green {
				background-color: green;
			}
			.blue {
				background-color: blue;
			}
			.yellow {
				background-color: yellow;
			}
			.black {
				background-color: black;
			}
			.colorbar {
				width: 250px;
				height: 50px;
				font-size: 20px;
				margin: auto auto;
			}
			#nowcolor {
				width: 70px;
				font-size: 20px;
				text-align: center;	
			}
			.connect {
				height: 300px;
				width: 300px;
				margin: 0 auto;
				text-align: center;
			}
			.socketmsg {
				height: 200px;
				width: 100%;
				text-align: center;
				font-size: 30px;
			}
			.connectbnt {
				height: 30px;
				width: 70px;
				margin: 30px auto;
			}
		
		</style>
	</head>
	<body>
		<div class="content">
			<div class="head"><h1>颜色管理面板</h1></div>
			<div class="color">
				<ul>
					<li><input type="button" class="red" onclick="getColor('red')"/></li>
					<li><input type="button" class="green"  onclick="getColor('green')"/></li>
					<li><input type="button" class="blue"  onclick="getColor('blue')"/></li>
					<li><input type="button" class="yellow"  onclick="getColor('yellow')"/></li>
					<li><input type="button" class="black"  onclick="getColor('black')"/></li>
				</ul>
				<div class="colorbar">当前的颜色为:<input type="text" name="" id="nowcolor" value="red" /></div>
			</div>
			<div class="connect" id="connect">
				<div class="socketmsg" id="msg">未连接...</div>
				<input type="button" id="button_connect" class="connectbnt" value="连接" onclick="getConnect()"/>
			</div>
		</div>
		
		<script type="text/javascript">
			var ws = null;
			var bnt = document.getElementById("button_connect");
			
			function getColor(color) {
				let colorbar = document.getElementById("nowcolor");
				colorbar.value = color;
			}
			
			function getConnect() {
				ws = new WebSocket('ws://123.56.232.166:5463/websocket');
				ws.onopen=function(){
					 document.getElementById("msg").innerHTML="已连接"
					 ifOnOpen();
				 }
				ws.onmessage=function(ev) {
					 document.getElementById("msg").innerHTML="已连接\n当前连接数:" + ev.data;
				}
				ws.onclose=function(){
					document.getElementById("msg").innerHTML="未连接"
					ifOnClose();
				}
				ws.onerror=function(ev){
					msg.innerHTML+="<li>"+ev.data+ "错误" + "</li>";
				}
			}
			
			function ifOnOpen() {
				bnt.value = "设置颜色";
				bnt.onclick = function() {
					let message = document.getElementById("nowcolor").value;
					if(ws.readyState == WebSocket.OPEN) {
					    //通过socket 发送消息
					    ws.send(message)
						alert("设置成功");
					} else {
					    alert("连接没有开启");
					}
				}
			}
			
			function ifOnClose() {
				bnt.value = "连接";
				bnt.onclick = function() {
					getConnect();
				}
			}
		</script>
	</body>
</html>
